<template>
    <div class="main">
        <div class="content1">
            <div class="left">
                <div><el-button type="primary">创建</el-button></div>
                <div><el-button>导出</el-button></div>
            </div>
            <div class="right">
                <div>
                    <el-select v-model="value" placeholder="请选择区域">
                        <el-option
                            v-for="item in quyuoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <el-select v-model="value" placeholder="请选择代理">
                        <el-option
                            v-for="item in dalioptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <el-input v-model="input" placeholder="请输入集团名称"></el-input>
                </div>
                <div>
                    <el-select v-model="value" placeholder="请选择状态">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <el-button type="primary">查询</el-button>
                </div>
            </div>
        </div>
        <div class="content2top">
            <div class="top">
                <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                    <el-tab-pane label="全部" name="1"></el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="content2">
            <div class="left">
                <div class="top"><span>代理商区域</span></div>
                <div class="tree"><qu-yu></qu-yu></div>
            </div>
            <div class="right">
                <div class="tab">
                    <el-table
                        ref="multipleTable"
                        :data="tableData3"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            label="名称"
                            width="120">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column
                            prop="static"
                            label="状态"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="创建区域"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="创建人"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="创建时间"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="异动人"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="异动时间"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="操作"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div class="caozuo">
                                    <xiangqing :xiangqing="xiangqing" @qqq="xqdata(scope.row)"></xiangqing>
                                    <div><el-button size="mini" type="primary">提交</el-button></div>
                                    <change :msg="xiugai" @toxiugai="XiuGai(scope.row)"></change>
                                    <del-jituan></del-jituan>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import xiangqing from './xiangqing';
    import deljituan from './del_jituan'
    import change from './change_jituan'
    import quYu from './quyu'
    export default {
        components:{
            'xiangqing' : xiangqing,
            'delJituan' : deljituan,
            'change' : change,
            'quYu' : quYu
        },
        data() {
            return {
                input: '',
                value: '',
                activeName: '1',
                submitnote: false,
                add:{'boo':true,'title':'创建代理商',data:{}},
                xiugai: {'boo':false,'title':'修改代理商',data:{}},
                xiangqing:{},
                quyuoptions:[],
                dalioptions:[],
                options: [{
                    value: 'true',
                    label: '正常'
                }, {
                    value: 'false',
                    label: '禁用'
                }],
                tableData3: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    static: '禁用'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    static: '禁用'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    static: '禁用'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    static: '禁用'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    static: '禁用'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    static: '启用'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    static: '启用'
                }],
                multipleSelection: []
            }
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            xqdata(row){
                this.xiangqing = row;
            },
            XiuGai(row){
                this.xiugai.data = row;
            }
        },
        watch:{
            activeName:function (val) {
                if(val === '1'){this.submitnote = false}
                if(val === '2'){this.submitnote = false}
                if(val === '3'){this.submitnote = true}
                if(val === '4'){this.submitnote = false}
                if(val === '5'){this.submitnote = true}
            }
        }
    }
</script>

<style lang="less" scoped>
    .main{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .content1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 10px;
        .left{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            div{margin: 0px 4px}
        }
        .right {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            div {
                margin: auto 4px;
            }
        }

    }
    .content2top{
        .top{height: 50px;line-height: 50px;}
    }
    .content2 {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .left{
            width: 200px;
            height: 100%;
            display: flex;
            flex-direction: column;
            .top{
                width: 200px;
                height: 36px;
                background: #dedede;
                text-align: center;
                line-height: 36px;
                font-size: 14px;
            }
            .tree{
                width: 200px;
                flex: 1;
                background: #ffffff;
            }
        }
        .right{
            flex: 1;
            display: flex;
            flex-direction: column;
            .tab{
                flex: 1;
                background: #fff;
                .caozuo{
                    display: inline-flex;
                    div{
                        margin: 0px 4px;
                    }
                }
            }
        }
    }
</style>
